<template>
    <div class="wrapper">
      <swiper :options="swiperOption">
        <swiper-slide class="slide_a" v-for='item of swiper' :key='item.id'><img :src='item.imgUrl' /></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
    export default {
      name: "HomeSwiper",
      props:{
         swiper:Array
      },
      data () {
        return {
          swiperOption: {
            // 所有的参数同 swiper \官方 api 参数
            pagination:'.swiper-pagination',
            autoplay:2000,
            loop:true
          },
          // swiperList:[
          //    {id:'0001',imgUrl:'http://img1.qunarzz.com/piao/fusion/1809/d4/e298dff35d3af802.jpg_750x200_9b0d56c1.jpg'},
          //    {id:'0002',imgUrl:'http://img1.qunarzz.com/piao/fusion/1811/a8/cb43c4ac6c215d02.jpg_750x200_83dee994.jpg'}
          //
          // ]
        }
      }


    }
</script>

<style lang="stylus" scoped>
/*样式穿透  因为scoped的原因，样式只能对本页面有用*/
	.wrapper >>> .swiper-pagination-bullet-active{
	      	background: #ffffff !important;
	 }
   .wrapper{
     width: 100%
     overflow:hidden;
     height:0;
     padding-bottom:28.6%;
      .slide_a img{
        width: 100%
      }

   }
</style>
